<template>
	<el-dialog
		title="导入按钮参数"
		class="dialog-share dialog"
		:visible.sync="copyBtnDialog"
		width="400px"
		:before-close="cancel"
		:close-on-click-modal="false"
		:append-to-body="true"
	>
		<div class="dialog-content share-c">
			<el-form :model="fieldFormData" ref="dialogForm" label-width="100px">
				<el-form-item label="选择按钮：" prop="btnData">
					<el-select v-model="fieldFormData.btnData" value-key="id" filterable placeholder="请选择按钮" size="small">
						<el-option
							v-for="(item, index) in configs"
							:key="index"
							:label="item.btnLabel"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="cancel(false)">取消</el-button>
			<el-button type="primary" size="small" @click="submitForm">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
  name: 'fieldBtnForm',
  props: {
    copyBtnDialog: {
		type: Boolean,
		default: false
	},
	designPageJson: {
		type: Object,
		default: () => {}
	},
  },
  data() {
	return {
		fieldFormData: {
			btnData: ''
		},
		configs: this.designPageJson.rowBtnList,
	}
  },
  created() {
  },
  methods: {
	submitForm() {
		this.cancel(true, this.fieldFormData.btnData)
	},
	cancel(flag, data) { 
		this.$emit('close', flag, data)
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import '../fonts/TableMaking.css';
	.dialog-share .el-radio:last-child{
		margin-right: 20px !important;
	}
</style>
